.sliceTileUsage
  width 100%
  height 100%
  display flex
  font-size 10px
  justify-content center
  align-items center
  text-transform uppercase
  font-weight 400

  .sliceTileUsageCount
    font-size 17px
    margin-right 7px
    border-radius 16px
    display flex
    justify-content center
    align-items center

.sliceOrigin
  cursor pointer
  display flex
  justify-content space-between
  align-items center
  position relative
  height 52px
  box-sizing border-box
  font-size 14px
  font-weight 400
  margin 6px
  border-radius 26px
  background var(--ghostA)
  border-bottom 2px solid var(--ghostZ)
  box-shadow 0px 2px 4px var(--ghostY)
  *
    pointer-events none

  .sliceOriginTitle
    padding 0px 48px 1px 48px
    color var(--outerspace)
    font-weight 400
    width 180px
    direction rtl
    text-overflow ellipsis
    overflow hidden
    text-align left
    white-space nowrap
    font-weight 300

.sliceOrigin:hover
  background var(--ghostB)

.sliceOriginNoDapp
  display flex
  justify-content center
  align-items center
  position relative
  text-transform uppercase
  box-sizing border-box
  height 52px
  font-size 10px
  letter-spacing 2px
  font-weight 400
  margin 6px
  border-radius 26px
  background var(--ghostZ)
  border 3px solid var(--ghostY)
  *
    pointer-events none

.viewAllOrigin
  display flex
  justify-content center
  align-items center
  height 10px
  padding 5px
  text-transform uppercase
  font-size 10px
  font-weight 300
  color var(--good)
  cursor pointer
  *
    pointer-events none

.viewAllOrigin:hover
  color var(--goodLight)
  
.sliceOriginIndicator
  color var(--outerspace)
  cursor pointer
  position absolute 
  top 50%
  margin-top -3px
  left 20px
  bottom 0px
  width 7px
  height 7px
  border-radius 4px
  display flex
  justify-content center
  align-items center
  border-radius 12px
  background var(--good)
  *
    pointer-events none

.sliceOriginIndicatorOff
  background var(--ghostY)
  box-shadow 0px 0px 0px var(--ghostX)

.sliceOriginIndicatorActive
  background var(--goodHighlight)
  box-shadow 0px 0px 4px var(--goodHighlight)

.sliceOriginReqs
  margin-right 24px
  display flex
  justify-content center
  align-items center

  .sliceOriginReqsNumber
    font-size 16px
    margin-right 5px
    
  .sliceOriginReqsLabel
    margin-top 2px
    font-size 8px
    text-transform uppercase
    font-weight 500

.originSwapOrigin
  height 120px
  width 100%
  font-size 20px
  font-weight 300
  display flex
  align-items center
  justify-content center

  .originSwapOriginText
    margin-left 10px

.originSwapTitle
  width 100%
  display flex
  justify-content center
  text-transform uppercase
  font-size 12px
  font-weight 500
  padding-bottom 6px
  letter-spacing 1px
  padding-left 1px
  
.originSwapChainList
  background var(--ghostZ)
  border-radius 12px

  .originChainItem
    position relative
    display flex
    justify-content flex-start
    align-items center
    height 64px
    margin 6px
    border-radius 26px
    cursor pointer
    background var(--ghostA)
    box-shadow 0px 2px 4px var(--ghostX)
    margin-bottom 10px
    font-size 18px
    font-weight 400
    border-bottom 2px solid var(--ghostZ)
    transform translateY(0px)

  .originChainItem:hover
    background var(--ghostB)
    box-shadow 0px 4px 8px var(--ghostX)
    transform translateY(-1px)

  .originChainItem:active
    background var(--ghostB)
    box-shadow 0px 1px 2px var(--ghostX)
    transform translateY(0px)

  .originChainItemIcon
    padding 1px 16px 0px 16px
    *
      cursor pointer
  
  .originChainItemCheck
    position absolute
    bottom 11px
    right 11px
    height 42px
    width 42px
    display flex
    justify-content center
    align-items center
    background var(--ghostZ)
    border-radius 12px

  .originChainItemActive
    color var(--good)
